<div class="simple-counter">
  <div class="simple">
    <div><span>$</span><p class="counter">150</p></div>
    <p>↑ Income</p>
  </div>
  <div class="simple">
    <div><p class="counter">85</p></div>
    <p>↓ Projects</p>
  </div>
  <div class="simple">
    <div><p class="counter">60</p><span>%</span></div>
    <p>↑ Achievement</p>
  </div>
</div>

<div class="customized-counter mt-4">
  <div class="customized">
    <i class="ti ti-apps"></i>
  <div class="d-flex align-items-center">
    <span>$</span>
    <p class="counter f-w-500 f-s-30 text-dark" data-count="500">0</p>
    
  </div>
    <p>Respected Companies</p>
  </div>
  <div class="customized">
    <i class="ti ti-report-analytics"></i>
  <div class="counter" data-count="75">0</div>
    <p>Analytical Reports</p>
  </div>
  <div class="customized">
    <i class="ti ti-brand-paypal"></i>
  <div class="d-flex align-items-center">
    
    <p class="counter f-w-500 f-s-30 text-dark" data-count="40">0</p>
    <span>%</span>
  </div>
    <p>Protected Payments</p>
  </div>
</div>

<div class="simple-counter">
    <div class="simple">
    <div>
      <span>$</span>
      <p class="counter">0</p>
      
    </div>
    <p><i class="ti ti-arrow-narrow-up text-success"></i> Income</p>
  </div>
    <div class="simple">
    <div>
      
      <p class="counter">0</p>
      
    </div>
    <p><i class="ti ti-arrow-narrow-down text-danger"></i> Projects</p>
  </div>
    <div class="simple">
    <div>
      
      <p class="counter">0</p>
      <span>%</span>
    </div>
    <p><i class="ti ti-arrow-narrow-up text-success"></i> Achievement</p>
  </div>
  <div>
    <button class="btn btn-light-primary">Update Data</button>
  </div>
</div>

<div class="simple-counter">
  <ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="1-tab"
        type="button" role="tab"
        aria-controls="tab-1" aria-selected="true">Tab-1</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="2-tab"
        type="button" role="tab"
        aria-controls="tab-2" aria-selected="false">Tab-2</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="3-tab"
        type="button" role="tab"
        aria-controls="tab-3" aria-selected="false">Tab-3</button>
    </li>
  </ul>
  <div class="tab-content" id="BasicContent">
    <div class="tab-pane fade show active" id="tab-1"
      role="tabpanel" aria-labelledby="1-tab" tabindex="0">
      ...
    </div>
    <div class="tab-pane fade" id="tab-2"
      role="tabpanel" aria-labelledby="2-tab" tabindex="0">
      ...
    </div>
    <div class="tab-pane fade" id="tab-3"
      role="tabpanel" aria-labelledby="3-tab" tabindex="0">
      ...
    </div>
  </div>
</div>